コンピュータにおける colorの表現方法には #16進数 や rgb(10進数) などがありますが, hsl (エイチ・エス・エル) 方式では hue (色相) / saturation (彩度) / lightness (輝度) の3要素で color を決定します. HSL Color はページ・デザインにおいて, 色の決定に迷った場合に役立ちます. 色相を最初に決めればあとは彩度と輝度の割合を変えるだけなので, 取り扱いが楽です. hue (色相) を0°～360°の角度の値で決定し, saturation (彩度) と lightness (輝度) を 0～100% の範囲で決めます.
| saturation ( 彩度 ) | ||||||
|---|---|---|---|---|---|---|
| 100% | 75% | 50% | 25% | 0% | ||
| lightness ( 輝度 ) | 100% | 1 | 2 | 3 | 4 | 5 |
| 90% | 6 | 7 | 8 | 9 | 10 | |
| 80% | 11 | 12 | 13 | 14 | 15 | |
| 70% | 16 | 17 | 18 | 19 | 20 | |
| 60% | 21 | 22 | 23 | 24 | 25 | |
| 50% | 26 | 27 | 28 | 29 | 30 | |
| 40% | 31 | 32 | 33 | 34 | 35 | |
| 30% | 36 | 37 | 38 | 39 | 40 | |
| 20% | 41 | 42 | 43 | 44 | 45 | |
| 0% | 46 | 47 | 48 | 49 | 50 | |
